<template>
	<div>
		<div class="header">
			<div class="inputItem">
				<div class="title">全部状态</div>
				<div class="inputBox">
					<el-select class="select" v-model="WaybillStatus" placeholder="请选择">
						<el-option v-for="item in WaybillStatusArr" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="inputItem">
				<div class="title">结算单号</div>
				<div class="inputBox">
					<el-input v-model="statementOdd" @keyup.enter.native="initList(1)">
					</el-input>
				</div>
			</div>
			<div class="inputItem">
				<div class="title">司机姓名</div>
				<div class="inputBox">
					<el-input v-model="driverName" @keyup.enter.native="initList(1)">
					</el-input>
				</div>
			</div>

			<!-- 查询 -->
			<el-button type="primary" size="small" icon="el-icon-search" @click="initList(1)">查询</el-button>
			<el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
		</div>
		<div class="main">
			<div class="list">
				<el-table :data="records" style="width: 100%" ref="table1">
					<el-table-column align="center" prop="SerialNumber" label="序号" width="70px">
					</el-table-column>
					<el-table-column align="center" prop="settlementStatus" label="结算单状态" width="100">
						<template slot-scope="scope">
							<div class="tag" style="margin: 0 auto" v-if="scope.row.settlementStatus == 0">
								<div class="dian"></div>
								<div class="text">已结算</div>
							</div>
							<div class="tag yellow" style="margin: 0 auto" v-else-if="scope.row.settlementStatus == 1">
								<div class="dian"></div>
								<div class="text">待结算</div>
							</div>
							<div class="tag Canceled" style="margin: 0 auto" v-else-if="scope.row.settlementStatus == 2">
								<div class="dian"></div>
								<div class="text">待结算</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="statementOdd" label="结算单号" width="220">
					</el-table-column>

					<el-table-column align="center" prop="projectName" label="项目名称">
					</el-table-column>
					<!--  <el-table-column align="center" prop="driverName" label="账期">
                    </el-table-column> -->
					<!--          <el-table-column align="center" prop="orderType" label="业务类型">-->
					<!--            &lt;!&ndash; 1, "拉货/搬家"-->
					<!--                                2, "B端承运订单"-->
					<!--                                3, "C端承运订单"-->
					<!--                                4, "供应商订单"-->
					<!--                                5, "撮合订单" &ndash;&gt;-->
					<!--            <template slot-scope="scope">-->
					<!--              <div v-if="scope.row.orderType == 1">拉货/搬家</div>-->
					<!--              <div v-else-if="scope.row.orderType == 2">B端承运订单</div>-->
					<!--              <div v-else-if="scope.row.orderType == 3">C端承运订单</div>-->
					<!--              <div v-else-if="scope.row.orderType == 4">供应商订单</div>-->
					<!--              <div v-else-if="scope.row.orderType == 5">撮合订单</div>-->
					<!--            </template>-->
					<!--          </el-table-column>-->
					<el-table-column align="center" prop="driverName" label="司机姓名">
						<template slot-scope="scope">
							<div>{{ scope.row.driverName || '--.--' }}</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="billAmount" label="司机金额">
						<template slot-scope="scope">
							<div>
								{{ scope.row.billAmount + "元" }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="settlementAmount" label="结算金额">
						<template slot-scope="scope">
							<div>
								{{
									scope.row.settlementStatus != 0
									? "----"
									: scope.row.settlementAmount + "元"
								}}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="createTime" label="创建时间">
					</el-table-column>

					<el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<div>
								<el-button type="text" size="small" @click="
								$router.push({
									path: '/home/carrierSettlement/list/paymentDetails',
									query: { driverBillId: scope.row.driverBillId },
								})
									">详情</el-button>
								<el-button type="text" size="small" v-if="scope.row.settlementStatus == 1" @click="
									showSettlementDialog(
										scope.row.billAmount,
										scope.row.driverBillId
									)
									">结算</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="paginationBox">
				<el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
					:page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
					<template slot>
						<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
					</template>
				</el-pagination>
			</div>
		</div>
		<!-- 运单审核 -->
		<!-- 详情对话框 -->
		<el-dialog class="waybillAuditBox" title="运单审核" :visible.sync="dialogVisible" width="440px">
			<!-- <div class="prompt">
          <i class="el-icon-warning"></i>
          <div class="prompt_text">
  
            该运单司机修正了运量，由{{ this.Weight.cargoWeight + this.Weight.measureUnitStr }}修正为{{ this.Weight.amendWeight?this.Weight.cargoWeight:this.Weight.amendWeight + this.Weight.measureUnitStr }}
          </div>
        </div> -->
			<el-form :model="AuditForm" :rules="AuditRules" ref="AuditForm" label-width="100px" class="demo_AuditForm">
				<el-form-item label="审核确定运量" prop="auditConfirmWeigh">
					<el-input v-model="AuditForm.auditConfirmWeigh">
						<div slot="suffix" style="padding: 0">
							<el-select v-model="AuditForm.measureUnitType" placeholder="请选择" class="danWei">
								<el-option v-for="item in danWeiArr" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-input>
				</el-form-item>
				<el-form-item label="审核司机运费" prop="amount">
					<el-input v-model="AuditForm.amount">
						<div slot="suffix" style="padding-right: 10px; padding-left: 10px">
							元
						</div>
					</el-input>
				</el-form-item>
				<el-form-item label="审核结果" prop="waybillAuditResult">
					<el-radio-group v-model="AuditForm.waybillAuditResult">
						<el-radio :label="3">合规</el-radio>
						<el-radio :label="2">有异常</el-radio>
						<el-radio :label="1">作废</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="审核异常扣款" prop="amountLose" v-show="AuditForm.waybillAuditResult != 3">
					<el-input v-model="AuditForm.amountLose">
						<div slot="suffix" style="padding-right: 10px; padding-left: 10px">
							元
						</div>
					</el-input>
				</el-form-item>
				<el-form-item label="审核说明" prop="resultInfo">
					<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="AuditForm.resultInfo" maxlength="30">
					</el-input>
				</el-form-item>
				<el-form-item label="审核附件" prop="auditUrls">
					<el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
						:before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :on-success="onSuccess"
						:file-list="fileList" :headers="headers" v-model="AuditForm.auditUrls">
						<el-button size="small" class="uploadBtn" type="primary">上传文件</el-button>
						<span slot="tip" class="el-upload__tip">
							仅可上传一份合同文件，支持PDF、JPG等格式
						</span>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<div style="display: flex; justify-content: flex-end">
						<el-button @click="resetForm('AuditForm')">取消</el-button>
						<el-button type="primary" @click="submitAudit()">确定</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog class="CollectionDialog" title="车队结算" :visible.sync="visibleSettlement" width="440px">
			<el-form :model="CollectionForm" :rules="CollectionRules" ref="CollectionForm" label-width="100px" class="demoForm">
				<el-form-item label="应付金额" prop="billAmount">
					<el-input v-model="CollectionForm.billAmount" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="实付金额" prop="settlementAmount">
					<el-input v-model="CollectionForm.settlementAmount" onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
				</el-form-item>
				<el-form-item label="支付密码" prop="outPwd">
					<el-input v-model="CollectionForm.outPwd"></el-input>
				</el-form-item>
				<el-form-item label="验证码">
					<el-input class="VerificationCode" placeholder="请输入验证码" v-model="verifyCode">
						<span v-show="showGetCode" class="getCode" slot="suffix" @click="getVerificationCode()">获取验证码</span>
						<span class="timing" v-show="!showGetCode" slot="suffix">重新发送({{ count }})</span>
					</el-input>
				</el-form-item>
				<el-form-item label="备注" prop="statementRemark">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" show-word-limit maxlength="30" :rows="2"
						placeholder="请输入内容" v-model="CollectionForm.statementRemark">
					</el-input>
				</el-form-item>

				<el-form-item>
					<div class="BtnBox">
						<el-button class="Btn" @click="visibleSettlement = false">取消</el-button>
						<el-button class="Btn" type="primary" @click="submitForm('CollectionForm')">确定</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import httpApi from "@/http";
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from "@/components/titleVue";
import BASEURL from "@/http/BaseUrl";
export default {
	data() {
		let validatePayRule = (rule, value, callback) => {
			let regular = /^([1-9]\d*(\.\d*[1-9][0-9])?)|^(0\.\d*[1-9][0-9])$|^(0\.\d*[1-9])$/
			value = value + ''
			if (value == '') {
				callback(new Error('金额不能为空'))
			} else if (value.split('.').length > 2) {
				callback('只能有一个小数点')
			} else if (!regular.test(value)) {
				callback(new Error('请输入正确面额金额'))
			} else {
				callback()
			}
		};
		return {
			dialogVisible: false, //运单审核弹窗显示
			orderStatus: "0", //0:待审核运单
			WaybillStatus: "", //全部状态
			entryName: "", //项目名称
			driverName: "",
			statementOdd: "",
			TypeSelected: "",
			records: [],
			data: {},
			pageCurrent: "1",
			size: "15",
			AuditResultValue: "",
			//全部状态选项
			WaybillStatusArr: [{
				value: "",
				label: "全部状态"
			},
			{
				value: "1",
				label: "待结算"
			},
			{
				value: "0",
				label: "已结算"
			},
			{
				value: "2",
				label: "已取消"
			},
			],
			fileList: [], //上传文件
			AuditForm: {
				waybillId: "",
				auditConfirmWeigh: "",
				measureUnitType: "",
				amount: "",
				waybillAuditResult: "",
				amountLose: "",
				SerialNumber: "",
				auditUrls: "",
				resultInfo: "",
			},
			headers: {
				Authorization: localStorage.getItem("token"),
			},
			url: BASEURL.TCHYURL + "/file/upload",
			Weight: {
				cargoWeight: "",
				measureUnitStr: "",
				amendWeight: "",
			},
			AuditRules: {},
			danWeiValue: "吨",
			danWeiArr: [{
				value: "2",
				label: "吨",
			},
			{
				value: "1",
				label: "车",
			},
			{
				value: "3",
				label: "件",
			},
			],
			visibleSettlement: false,
			billAmount: "", //应付金额

			CollectionForm: {
				driverBillId: "",
				billAmount: "",
				settlementAmount: "", //实付金额
				statementRemark: "", //备注
				outPwd: ''
			},
			CollectionRules: {
				billAmount: [{
					required: true,
					message: "应付金额不能为空",
					trigger: "blur"
				},],
				settlementAmount: [{
					validator: validatePayRule,
					trigger: "blur",
				}],
				outPwd: [{
					required: true,
					message: "请输入密码",
					trigger: "blur"
				},],
				statementRemark: [{
					max: 30,
					message: "最大30个字符",
					trigger: "blur"
				},],
			},

			showGetCode: true,
      count: "", //验证码计时
      timing: null,
      verifyCode: '',//结算验证码
			seconds: "",
		};
	},
	methods: {
		//获取结算验证码
		getVerificationCode() {


			// let endTime=new Date().getTime()+60000  //获取未来60秒后的 日期时间

			// sessionStorage.setItem('endTime',endTime)

			this.showGetCode = false;
			const TIME_COUNT = 60; //倒计时初始值60秒
			if (!this.timing) {
				this.count = TIME_COUNT;

				this.timing = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {

						this.count--;
						this.seconds = this.count
				
					} else {
						this.showGetCode = true;
						clearInterval(this.timing);
						this.timing = null;
					}
				}, 1000);
			}

			let params = {
				phone: this.$store.state.phoneNumber,
				port: "MODIFY_MONEY",
			}
			//console.log(params)
			httpApi.loginApi.getAuditCode(params).then(res => {
				if (res.data.code == 200) {
					this.$message.success('获取验证码成功')
				}

			})
		},
		handleRemove(file, fileList) {
			////console.log(file, fileList);
			this.fileList = [];
		},
		handlePreview(file) {
			////console.log(file, 3333);
		},
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
				} 个文件`
			);
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`);
		},
		onSuccess(response, file, fileList) {
			////console.log(response);
			this.AuditForm.auditUrls = response.data.url;
			this.fileList.push({
				name: response.data.name,
				url: this.response.data.url,
			});
		},
		changePages(val) {
			this.pageCurrent = val;
			this.initList();
		},
		initList(current) {
			// status判定 2:已完成运单, 1:在途运单, 0:待审核运单
			let params = {
				settlementStatus: this.WaybillStatus,
				statementOdd: this.statementOdd,
				name: this.driverName,
				current: current == 1 ? 1 : this.pageCurrent,
				size: this.size,
			};
			////console.log("付款单司机列表res", params);
			httpApi.carrierSettlementApi.getList(params).then((res) => {
				////console.log(res);
				this.data = res.data.data;
				this.records = res.data.data.records;
				////console.log(this.records);
				////console.log("总数据", this.data);
				////console.log("列表数据", this.records);
				// 前端解决序号
				this.records.forEach((item, i) => {
					let num = i + 1;
					item.SerialNumber = num;
				});
			});
		},
		async resetForm(AuditForm) {
			this.AuditForm.measureUnitType = "";
			this.$refs[AuditForm].resetFields();

			this.dialogVisible = false;
		},
		showSettlementDialog(billAmount, driverBillId) {
			this.visibleSettlement = true;
			this.CollectionForm.billAmount = billAmount;
			this.CollectionForm.driverBillId = driverBillId;
			(this.CollectionForm.settlementAmount = ""),
				(this.CollectionForm.statementRemark = "");
			this.CollectionForm.settlementAmount = billAmount
		},
		submitForm(CollectionForm) {
			this.$refs[CollectionForm].validate((valid) => {
				if (valid) {
					let params = {
						driverBillId: this.CollectionForm.driverBillId,
						settlementAmount: this.CollectionForm.settlementAmount,
						statementRemark: this.CollectionForm.statementRemark,
						outPwd: this.CollectionForm.outPwd,
						code:this.verifyCode
					};
					httpApi.carrierSettlementApi
						.orderApplyForPay(params)
						.then((res) => {
							////console.log("结算", res);
							if (res.data.code == 200) {
								this.$message.success("收款单结算成功");

								this.initList();
								this.visibleSettlement = false;
								//this.$router.go(0);
							}
						});
				} else {
					return false;
				}
			});
		},

		CleanUp() {
			(this.driverName = ""), (this.statementOdd = "");
			this.WaybillStatus = "";
			this.initList(1);
		},

		//
		showWaybillAuditDialog(id, amendWeight, cargoWeight, measureUnitStr) {
			this.AuditForm.waybillId = id;
			this.Weight.amendWeight = amendWeight;
			this.Weight.cargoWeight = cargoWeight;
			this.Weight.measureUnitStr = measureUnitStr;
			this.dialogVisible = true;
		},

		submitAudit() {
			let params = this.AuditForm;
			httpApi.WaybillManagementApi.auditWaybill(params).then((res) => {
				if (res.data.code == 200) {
					this.$message("审核成功");
					this.dialogVisible = false;
					this.$router.go(0);
				} else {
					this.$message("审核失败");
				}
			});
		},
		// 记录滚动距离
		scrollEvent(res) {
			this.$route.meta.scrollTop = res.target.scrollTop
			//console.log(res.target.scrollTop);
		},
	},
	activated() {
		//组件激活时监听表格滚动条位置,
		this.$refs.table1.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
		// 激活设置滚动位置
		this.$refs.table1.bodyWrapper.scrollTop = this.$route.meta.scrollTop
	},
	beforeRouteLeave(to, from, next) {
		// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
		this.$refs.table1.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
		next()
	},

	mounted() {
		this.initList();

	},
};
</script>

<style lang="scss" scoped>
.VerificationCode {
	height: 40px;
	margin-bottom: 19px;

	::v-deep .el-input__prefix {
		margin-left: 2px;
		line-height: 40px;
	}

	::v-deep .el-input__inner {
		height: 40px;
	}

	.getCode {
		color: #1890ff;
		font-size: 14px;
		line-height: 40px;
		display: inline-block;
		margin-right: 13px;
		position: relative;
		z-index: 800;
		cursor: pointer;
	}

	.timing {
		color: #1890ff;
		font-size: 14px;
		line-height: 40px;
		margin-right: 13px;
	}

	.icon-yanzhengma {
		font-size: 18px;
	}
}

.header {
	height: 76px;
	width: 100%;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 29px;

	.inputItem {
		display: flex;
		align-items: center;
		margin-right: 23px;

		>.title {
			color: #262626;
			font-size: 12px;
			margin-right: 7px;
		}

		>.inputBox {
			width: 160px;

			.select {
				::v-deep .el-input__icon {
					line-height: 0;
				}
			}

			::v-deep .el-input__inner {
				height: 32px;
				font-size: 12px;
			}

			::v-deep .el-input__inner::placeholder {
				color: #c3c3c3;
				font-size: 12px;
			}
		}
	}
}

.main {
	width: 100%;
	height: calc(100vh - 267px);
	background-color: #fff;
	padding: 0px 30px;

	.list {
		height: calc(100% - 48px);
		width: 100%;

		.tag {
			width: 63px;
			height: 28px;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			background-color: #ecf5fe;
			color: #1890ff;

			.dian {
				width: 4px;
				height: 4px;
				border-radius: 50%;
				margin-right: 4px;
				background-color: #1890ff;
			}

			&.yellow {
				background-color: #fffce8;
				color: #f8b030;

				.dian {
					background-color: #f8b030;
				}
			}

			&.Canceled {
				background-color: #fde8e9;
				color: #f5222d;

				.dian {
					background-color: #f5222d;
				}
			}
		}

		::v-deep .el-table__body-wrapper {
			height: calc(100vh - 365px);
			overflow-y: scroll;
		}

		// 表头样式
		::v-deep .el-table__header th {
			background-color: #f0f6fd;
			color: #262626;
			font-size: 12px;
			font-weight: bold;
			text-align: center;

			// 表 body的td
			::v-deep .el-table__body td {
				color: #595959;
				font-size: 12px;
			}
		}
	}

	.paginationBox {
		width: 100%;
		background-color: #fff;
		display: flex;
		height: 48px;

		align-items: center;

		.pagination {
			margin-left: auto;

		}
	}
}

// 运单审核弹窗
.waybillAuditBox {
	::v-deep .el-dialog__body {
		padding: 30px 30px 24px 30px;
	}

	.prompt {
		padding: 20px;
		height: 32px;
		display: flex;
		align-items: center;
		border-radius: 4px;
		background-color: #fdf6ec;
		margin-bottom: 20px;
		border: 1px solid #faecd8;

		.el-icon-warning {
			color: #e6a23c;
			font-size: 13.33px;
			margin-right: 12px;
		}

		.prompt_text {
			color: #e6a23c;
			font-size: 12px;
			height: 22px;
			line-height: 22px;
		}
	}

	.uploadFileBtn {
		border: 1px solid #dcdfe6;
	}

	.danWei {
		::v-deep .el-input__inner {
			width: 68px;
			border: none;
			background-color: #f5f7fa;
			color: #606266;
			font-size: 12px;
			height: 37px;
			border-left: 1px solid #dcdfe6;
			border-radius: 0;
			position: relative;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			right: -4px;
			top: -1px;
		}
	}
}
</style>